<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户列表</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/vue/vue.min.js"></script>
<script src="js/jquery/jquery.min.js"></script>
<script src="js/laypage/laypage.js" charset="utf-8"></script>
<script src="js/layer/layer.js" charset="utf-8"></script>
</head>
<body>
	<div id="main" class="wrap">	
		<div class="main">
		<h2>用户管理</h2>
		<div class="head">
		<table class="get">
			<tr>
				<th>查询条件:</th>
				<th>姓名:<input type="text" id="name" class="th1"></th>
				<!-- <th>ID:<input type="text" id="id" class="th1"></th>
				<th>性别:<input type="text" id="sex" class="th1"></th>
				<th>年龄:<input type="text" id="age" class="th1"></th> -->
				<th><button type="button" id="findUser" class="btn">查询用户</button></th>
				<th><button type="button" id="addUser" class="btn">添加用户</button></th>
			</tr>
		</table>
		</div>
		<div class="manage">
			<table class="list">
				<tr>
					<th>用户ID</th>
					<th>用户姓名</th>
					<th>性别</th>
					<th>年龄</th>
					<th>操作</th>
				</tr>
				<tr class="active" v-for="item in result">
					<td class="w4 c" >{{item.id}}</td>
					<td class="w2 c">{{item.name}}</td>
					<td class="w2 c">{{item.sex}}</td>
					<td class="w2 c">{{item.age}}</td>
					<td class="w2 c"><a href="#" @click="editorUser(item.id)">修改</a> <a href="#" @click="deleteUser(item.id)">删除</a></td>
				</tr>
			</table>
			
		</div>
		<div id="pagenav" align="right"></div>
	</div>
</div>
<script>
	
	var main = new Vue({
		el : '#main',
		data : {
			result : []
		}
	});
	
	
	var getUsers = function(curr) {
		$.ajax({
			type : "GET",
			url : "/user/getusers",
			contentType:"application/json",
			data : {
				pageIndex:curr || 1,
				pageSize:4,
				name:$("#name").val()
			},
			success : function(msg) {
				main.result = msg.userList;
				laypage({
					cont : 'pagenav', 
					pages : msg.pageCount, 
					curr : curr || 1, 
					jump : function(obj, first) { 
						if (!first) { 
							getUsers(obj.curr);
						}
					}
				});
			}
		});
	}
	
	
	
	
	$('#findUser').on('click', function() {
		getUsers();
	});
	
	
	$('#addUser').on('click', function(){
		
		layer.open({
			type : 2,
			title : '添加用户',
			area : [ '700px', '400px' ],
			content : 'user_add.html',
			end : function() {
				getUsers();
			}
		});
		
	});
	
	
	var editorUser = function(id) {
		layer.open({
			type : 2,
			title : '编辑用户',
			area : [ '700px', '400px' ],
			content : '/user/editorPage?id='+id,
			end : function() {
				getUsers();
			}
		});
	}
	
	
	var deleteUser = function(id) {
		
		layer.confirm('确定要删除么？', {
			btn : [ '是', '否' ]
		
		}, function() {
				
				$.ajax({
					type : "DELETE",
					dataType : "json",
					url : "/user/deleteUser",
					data : {
						id:id
					},
					success : function(msg) {
						getUsers();
						layer.msg('已经成功删除记录! ' + id,{icon:5});
					}
				});

		}, function() {
			
		});
	}
	
	getUsers();
</script>

</body>
</html>